<!--
 * @Descripttion: 
 * @version: 1.0.1
 * @Author: daipeng
 * @Date: 2020-08-20 17:18:52
 * @LastEditors: daipeng
 * @LastEditTime: 2020-10-30 18:46:09
-->
<template>
	<div>
		<div id="mychart7" style="height: 270px; width: 90%;"></div>
	</div>
</template>

<script>
var common = require('../../../../static/tool.js')
import { mainfun } from '../../../../../assets/js/main.js'
export default {
	data() {
		return {
			url: common.url
		}
	},
	props: {
		all_task_finish: {
			required: true
		},
		month_task_finish: {
			required: true
		}
	},
	watch: {
		all_task_finish() {
			this.init()
		},
		month_task_finish() {
			this.init()
		}
	},
	methods: {
		init() {
			var that = this
			let mychart7 = this.$echarts.init(document.getElementById('mychart7'))

			mychart7.setOption({
				xAxis: {
					type: 'category',
					data: ['累计任务', '本月任务']
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999'
						}
					}
				},
				series: [
					{
						type: 'bar',
						itemStyle: {
							normal: {
								color: function (params) {
									//颜色组
									var colorList = ['#5ea1f9', '#5ecc9b', '#c02d28']
									return colorList[params.dataIndex]
								}
							}
						},
						barWidth: '60%',
						data: [that.all_task_finish, that.month_task_finish],
						label: {
							show: true,
							position: 'top'
						}
					}
				]
			})
		}
	}
}
</script>

<style scoped>
/* #mychart7 {
    margin: 0 auto;
} */
</style>



// WEBPACK FOOTER //
// src/components/components/echarts/Ybpnext.vue